<template>
    <div v-if="songList.length !==0" class="play">
        <play-tabar></play-tabar>
        <div class="play-wrap" v-show="menuStatus">
            <div class="head">
                <div class="back" @click="set_menuStatus(false)">
                    <i class="iconfont icon-fanhui"></i>
                </div>
                <div class="info">
                    <div class="name">{{currentSong.name}}</div>
                    <div class="singer">{{currentSong.singer}}</div>
                </div>
            </div>
            <div class="background-wrap">
                <div class="background" :style="{ backgroundImage: `url(${songImg})`}"></div>
                <div class="mask"></div>
            </div>
            <div class="pic">
                <div class="plate-wrap spin" :class="animation_play">
                    <div class="img-box">
                        <img :src="songImg" :alt="currentSong.name" />
                    </div>
                </div>
            </div>
            <div class="botton">
                <div class="progress-bar-wrap">
                    <div class="time time-progress" ref="rr">{{get_M_S(currentTime)}}</div>
                    <div class="progress-bar">
                        <el-slider
                            :max="currentSong.time"
                            v-model="currentTime"
                            :show-tooltip="false"
                            @change="sliderChange"
                            @touchstart.native="touchmove"
                        ></el-slider>
                    </div>
                    <div class="time duration">{{get_M_S(currentSong.time)}}</div>
                </div>
                <!-- audio -->
                <audio
                    :loop="loopState"
                    ref="audio"
                    :src="currentSong.url"
                    @canplay="canplay"
                    @timeupdate="timeupdate"
                    @ended="ended"
                ></audio>
                <!-- audio -->
                <div class="control">
                    <div class="item">
                        <i class="iconfont" :class="playMode_class" @click="select_palyMode"></i>
                    </div>
                    <div class="item" @click="prevSong">
                        <i class="iconfont icon-shangyishou"></i>
                    </div>
                    <div class="item" @click="selectPlay">
                        <i
                            class="iconfont"
                            :class="palyStatus ? 'icon-zantingtingzhi' : 'icon-bofang'"
                        ></i>
                    </div>
                    <div class="item" @click="nextSong">
                        <i class="iconfont icon-xiayishou-copy"></i>
                    </div>
                    <div class="item" @click="playlistDisplay">
                        <i class="iconfont icon-caidan"></i>
                    </div>
                </div>
            </div>
        </div>
        <playList ref="playList"></playList>
    </div>
</template>

<script>
import { Slider } from "element-ui";
import playTabar from "@/components/play/play-tabar.vue";
import playList from "@/components/play/playList.vue";
import { mapState, mapMutations, mapActions } from "@/store/helper/play";
export default {
    name: "play",
    data() {
        return {
            currentTime: 0,
            sliderstate: true,
        };
    },
    watch: {
        palyStatus: function (val) {
            this.$nextTick(function () {
                this.ctrlPlay(val);
            });
        },
        songList: function (newVal, oldVal) {
            if (newVal.length === 0) {
                this.set_menuStatus(false);
            }
            if ((oldVal.length === 0) & (newVal.length > 0)) {
                this.set_menuStatus(true);
            }
        },
    },
    computed: {
        ...mapState({
            palyStatus: (state) => state.palyStatus,
            songList: (state) => state.songList,
            currentSong: (state) => state.currentSong,
            menuStatus: (state) => state.menuStatus,
            playMode: (state) => state.playMode,
        }),
        songImg() {
            return this.currentSong.picUrl
                ? this.currentSong.picUrl
                : "@/assets/logo.png";
        },
        animation_play() {
            return !this.palyStatus ? "animation-play-paused" : "";
        },
        playMode_class() {
            var _class;
            switch (this.playMode) {
                case "loop":
                    _class = "icon-loop-2";
                    break;
                case "queue":
                    _class = "icon-liebiaoxunhuan";
                    break;
                case "random":
                    _class = "icon-suijixunhuan";
                    break;
                default:
                    break;
            }
            return _class;
        },
        loopState() {
            return this.playMode === "loop" ? true : false;
        },
    },
    methods: {
        ...mapMutations([
            "set_menuStatus",
            "set_playListDisplay",
            "set_palyStatus",
            "set_playMode",
        ]),
        ...mapActions(["nextSong", "prevSong", "select_palyMode"]),
        playlistDisplay() {
            this.set_playListDisplay(true);
        },
        // 播放按钮
        selectPlay() {
            this.set_palyStatus(!this.palyStatus);
        },
        ctrlPlay(val) {
            val ? this.$refs.audio.play() : this.$refs.audio.pause();
        },
        canplay() {
            this.ctrlPlay(this.palyStatus);
        },
        //更新当前播放时间
        timeupdate() {
            if (this.sliderstate) {
                this.currentTime = this.$refs.audio.currentTime;
            }
        },
        // 播放结束
        ended() {
            if (this.playMode != "loop") {
                this.nextSong();
            }
        },
        // 转换时间格式
        get_M_S(e) {
            var m;
            var s;
            m = Math.floor(e / 60);
            s = Math.floor(e % 60);
            if (s < 10) {
                s = "0" + s;
            }
            return m + ":" + s;
        },
        // 滑块值改变时触发
        sliderChange(newVal) {
            this.$refs.audio.currentTime = newVal;
            this.sliderstate = true;
        },
        touchmove() {
            this.sliderstate = false;
        },
    },
    components: {
        playTabar,
        playList,
        "el-slider": Slider,
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.play-wrap {
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    .background-wrap {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .background {
            position: absolute;
            z-index: 10;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            -webkit-filter: blur(10px);
            filter: blur(10px);
        }
        .mask {
            position: absolute;
            z-index: 11;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.6;
            background: #000;
        }
    }
    .pic {
        position: absolute;
        z-index: 2;
        width: 80%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -70%);
        .plate-wrap {
            width: 100%;
            padding: 58px;
            background: url("../assets/img/disc-ip6.png") no-repeat;
            background-size: contain;
            .img-box {
                width: 100%;
                height: 0;
                padding-bottom: 100%;
                border-radius: 50%;
                overflow: hidden;
            }
        }
    }
    .head {
        position: absolute;
        z-index: 100;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        .back {
            flex: 0 0 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            .iconfont {
                color: #fff;
            }
        }
        .info {
            color: #fff;
            flex: 1;
            text-align: center;
            margin-right: 40px;
            .name {
                font-size: 16px;
            }
            .singer {
                color: #b7b6b6;
                font-size: 12px;
            }
        }
    }
    .botton {
        padding: 15px 25px;
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 100;
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 15s linear 0s infinite;
}
.animation-play-paused {
    animation-play-state: paused;
    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
.control {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.control .iconfont {
    font-size: 35px;
    color: #fff;
}
.red {
    color: #d44439;
}
.progress-bar-wrap {
    margin-bottom: 20px;
    position: relative;
    .time {
        position: absolute;
        top: 17px;
        font-size: 12px;
        color: #fff;
    }
    .time-progress {
        left: 0;
    }
    .duration {
        right: 0;
    }
    .progress-bar {
        position: relative;
        margin: 0 35px;
        padding: 5px 0;
        .background {
            background: #e4e2e2;
            opacity: 0.6;
            height: 5px;
        }
        .progress {
            position: absolute;
            top: 5px;
            left: 0;
            height: 5px;
            background: #d44439;
        }
        .icon {
            position: absolute;
            top: 0;
            left: 0;
            height: 15px;
            width: 15px;
            background: #d6c6c4;
            border-radius: 50%;
            transform: translateX(-7px);
        }
    }
}
</style>
